<% include header %>
<link rel="stylesheet" href="/css/login.css">
<link rel="stylesheet" href="/css/articledetail.css">
<script src="/js/ajax.js"></script>
<% include nav %>
<% if(!session.user){ %>
    <% include login %>
<% } %>
<div class="article-list padmar">
    <div class="post-head">
        <span class="post-type label label-info">
            <%= article.type %>
        </span>
        <a href="/personal/<%= article.name %>" class="author">
            <img src="/images/<%= article.avator %>" alt="" class="img-circle">
            <h4><%= article.name %></h4>
            <span><%= article.moment %></span>
        </a>
        <% if(session.user){ %>
            <% if(session.user === article.name){ %>
        <a href="/" class="editself">编辑</a>
        <a href="/delete?id=<%= article.id %>" class="delete"> 删除</a>
        <% } %>
        <% if(session.user != article.name){ %>
        <span class="follow btn btn-default">关注作者</span>
        <% } %>
        <% } %>

    </div>
    <aside>
        <ul class="comment-taps">
            <li class="list"><a href="javascript:;" title="点赞"><span class="glyphicon glyphicon-heart-empty"></span></a></li>
            <li style="text-align: center;color: gray;" class="likes"><%= article.likes %></li>
            <li class="list"><a href="#comment" title="评论"><span class="glyphicon glyphicon-comment"></span></a></li>
            <li class="list"><a href="javascript:;" title="收藏"><span class="glyphicon glyphicon-tasks"></span></a></li>
        </ul>
    </aside>
    <h1 class="article-title"><%= article.title %><span class="article-pv glyphicon glyphicon-folder-open">&nbsp;<%= article.pv %></span></h1>
    <section class="content-section">
            <%- article.content %>
    </section>

</div>

<div class="comment padmar">
        <% if(session.user){ %>   
    <div class="create-comment">
         <form >
             <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
             <input type="button" class="btn btn-success" value="发表评论">
         </form>
     </div>
     <% } %>
     <% if(commentPageLenght) { %>
     <div class="comment-list">
        <% commentPage.forEach(function(val){ %>
       <div class="comment-item">
         <h4><a href="/personal/<%= val['name'] %>"><img src="/images/<%= val['avator'] %>" alt="<%= val['name'] %>"><%= val['name'] %></a></h4>
         <span><%= val['moment'] %></span>
         <div class="comment-content">
                 <%= val['content'] %>
                 <% if(session.user == val['name']){ %>
                    <a href="javascript:deleteComment('/deleteComment/<%= article.id %>/<%= val['id'] %>',document.getElementsByClassName('deleteComment')[0])" class="deleteComment">删除</a>
                    <% } %>
         </div>
       </div>
         <% }) %>
        
     </div>
     <div style="display:block;width:50%;margin:auto;margin-top: 30px;" class="pagination" id="page"></div>
     <% }else{ %>
        <p style="text-align:center;line-height:80px;fon-size:30px;color:gray">暂无任何评论</p>       
        <% } %>
            
 </div>
 
<script src="/js/pagination.js"></script>
<script src="/js/mask.js"></script>
<script>
   $(document).ready(function(){
        
        var userName = "<%- session.user %>"
     
		pagination({
			selector: '#page',
			totalPage: '<%= commentPageLenght %>',
			currentPage: 1,
			prev: '上一页',
			next: '下一页',
			first: true,
			last: true,
			showTotalPage:true,
			count: 2//当前页前面显示的数量
		},function(val){
			// 当前页
			var _comment = ''
			$.ajax({
				url: "/article/<%= article.id %>/commentPage",
				type: 'POST',
				data:{
					page: val
				},
				cache: false,
				success: function (msg) {
					console.log(msg)
					_comment = ''
					if (msg != 'error') {
						$('.comment-list').html(' ')
						$.each(msg,function(i,val){
                
                            _comment +=
                            " <div class='comment-item'>" + 
                            "<h4><a href='/personal/" + val.name + "'>" + "<img src='images/" + val.avator + "' alt=" + val.name + "'>" + val.name + "</a></h4>" +
                            "<span>" + val.moment + "</span>" + 
                            "<div class='comment-content'>" ;
                                if(val.name == userName){
                                    _comment +=  val.content + "<a href='javascript:deleteComment('/deleteComment/<%= article.id%>/'" +  val.id +",this)' class='deleteComment'>" + "删除</a>" +
                            "</div>" +
                            "</div>"
                                }else{
                                    _comment +=  val.content + 
                            "</div>" +
                            "</div>"
                                }
                                
                        })
                        console.log( _comment)
						$('.comment-list').append(_comment)
					}else{
						alert('分页不存在')
					} 
				}
			})
		
		})
    })
    //点赞
    var postTaps = document.getElementsByClassName('comment-taps')[0];
    var addHeart = postTaps.getElementsByTagName('li')[0],
        gly = addHeart.getElementsByClassName('glyphicon')[0],
        likes = postTaps.getElementsByClassName('likes')[0];

    var collects = postTaps.getElementsByTagName('li')[3];
    
    '<% if(session.user){ %>'
        window.onload = function(){
            console.log('<%- session.id%>') 
            '<% if(session.user != article.name){ %>'
            var follow = document.getElementsByClassName('follow')[0];
            if('<%= follow %>'=='<%= session.id%>'){    //已关注
                follow.innerHTML = '已关注'
            }
            follow.onclick = function(){
                if(follow.innerHTML==='关注作者'){
                    ajax('get','/follow/<%= article.uid %>?flag=1',null);
                    xhr.onreadystatechange = function () {
                 if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                    console.log(xhr.responseText)
                     if(xhr.responseText){
                         follow.innerHTML = '已关注';
                         console.log('ok')
                     }
                 }
             }
                }else{
                    ajax('get','/follow/<%= article.uid %>?flag=2',null);
                    xhr.onreadystatechange = function () {
                 if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                     console.log(xhr.responseText)
                     if(xhr.responseText){
                         follow.innerHTML = '关注作者'
                         console.log('ok2')
                     }
                 }
             }
                }
            }
            '<% } %>'
            console.log('<%= likes %>') 
            if('<%= likes %>'==='<%= session.user %>'){ //已点赞
                gly.setAttribute('class','glyphicon '+'glyphicon-heart');
            }
        }

    addHeart.onclick = function () {
         if(gly.getAttribute('class').indexOf('glyphicon-heart-empty')>-1){
             ajax('get','/addHeart/<%= article.id %>?flag=1',null);
             xhr.onreadystatechange = function () {
                 if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                     if(xhr.responseText){
                         gly.setAttribute('class','glyphicon '+'glyphicon-heart');
                         likes.innerHTML = parseInt(likes.innerHTML) + 1;
                     }
                 }
             }
         }else{ //取消赞
             ajax('get','/addHeart/<%= article.id %>?flag=2',null);
             console.log('<%= likes %>')
             xhr.onreadystatechange = function () {
                 if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                     if(xhr.responseText){
                         gly.setAttribute('class','glyphicon '+'glyphicon-heart-empty');
                         likes.innerHTML = parseInt(likes.innerHTML) - 1; 
                     }
                 }
             }

         }
    }

     //收藏
     //取消收藏或收藏
    let cotitle = collects.getElementsByTagName('a')[0];
    if('<%= collects %>'=='<%= session.user %>'){
                cotitle.setAttribute('title','取消收藏');
    }
        collects.onclick = function () {
            if(cotitle.getAttribute('title')=='收藏'){
              // cotitle.setAttribute('title','收藏');
        ajax('get','/collects/<%= article.id %>?flag=1',null);
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                if(xhr.responseText){
                   alert('收藏成功');
                   cotitle.setAttribute('title','取消收藏');
                }
            }
        }
    }else{
        ajax('get','/collects/<%= article.id %>?flag=2',null);
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status>=200&&xhr.status<300){
                if(xhr.responseText){
                    alert('取消成功');
                    cotitle.setAttribute('title','收藏');
                }
            }
        }
    }
     }

     //评论
     let comment = document.getElementsByClassName('create-comment')[0].getElementsByClassName('btn')[0];
     let Allow = true;
        comment.onclick = function(){
            let comments = document.getElementById('comment');
            if(comments.value==''){
                comments.value = '请输入评论内容！';
                setTimeout(()=>{
                    comments.value = '';
                },500)
                return 0;
            }
            if(!Allow) return 0;
            Allow = false;
            // + '&articleId=' + '<%= article.id %>'
            ajax('post','/comment/<%= article.id %>',"comments=" + comments.value,'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&xhr.status>=200&&xhr.status<300){
                    if(xhr.responseText){
                        mask('评论成功!');
                        setTimeout(()=>{
                            window.location.reload();
                        },1500)
                        Allow = true;
                    }
                }
            }

        }

        //删除评论
        function deleteComment(url,item){
            ajax('get',url,null);
            console.log(item)
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&xhr.status>=200&&xhr.status<300){
                    if(xhr.responseText){
                        console.log('删除评论成功');
                        mask('删除成功!');
                        console.log(item)
                        console.log(item.parentNode)
                        item.parentNode.parentNode.outerHTML = '';
                    }
                }
            }
        }
     
    '<% }else{ %>'
    addHeart.onclick = function(){
        alert("请先登录")
    }
    collects.onclick = function(){
        alert("请先登录")
    }
    '<% } %>'
   
</script>
</body>
</html>
